<template>
	<div class="metaData">
		<el-row
			type="flex"
			align="center"
			class="metaData-item"
			justify="space-between"
		>
			<el-col :span="24" class="operation">
				<!----<el-radio-group v-model="tabPosition" @change="handleClick">
				<el-radio-button label="basis">基础信息</el-radio-button>
				<el-radio-button label="associat">关联信息</el-radio-button>
				<el-radio-button label="change">变更信息</el-radio-button>
				</el-radio-group>--->
				<el-button-group>
					<el-button 
						label="basis"
						:class="[ 'btn-notAction', tabPosition == 'basis' ? 'btn-action' : '',]"
						@click="handleClick('basis')">
						基础信息
					</el-button>
					<el-button
						label="associat"
						:class="[ 'btn-notAction', tabPosition == 'associat' ? 'btn-action' : '',]"
						@click="handleClick('associat')"
						>关联信息</el-button>
					<el-button
						label="change"
						:class="[ 'btn-notAction', tabPosition == 'change' ? 'btn-action' : '',]"
						@click="handleClick('change')"
						>变更信息</el-button>
				</el-button-group>
				<div class="float-right">
					<el-button
						type="primary"
						icon="el-icon-plus"
						size="mini"
						v-show="
							((!isRowEdit && tabPosition == 'basis') ||
								(!isRowEdit && tabPosition == 'associat')) &&
							(accessType == '4' || accessType == '5')
						"
						@click="isEdidAddHandle(tabPosition)">新增</el-button>
					<el-button
							type="primary"
							icon="el-icon-edit-outline"
							size="mini"
							@click="handleEdit(null, null, tabPosition)"
							v-show="
								tabPosition == 'associat' &&
								!isRowEdit &&
								(accessType == '4' || accessType == '5')
							"
							>编辑</el-button
					>
					<el-button
							type="primary"
							icon="el-icon-download"
							size="mini"
							@click="associatSave"
							v-show="isRowEdit && tabPosition == 'associat'"
							>保存</el-button
					>
					<el-button
							size="mini"
							v-show="isRowEdit && tabPosition == 'associat'"
							@click="handleExit(null, null, tabPosition)"
							>取消</el-button
					>
					<!-- <el-button
							type="primary"
							size="mini"
							v-show="tabPosition == 'associat'"
							@click="handleAssociat"
					>
							<svg-icon icon-class="eye-open" class="svg-iconfont" />
							关联图</el-button 
					>-->
				</div>
			</el-col>
		</el-row>
		<!--基础信息--->
		<template id="basis">
				<el-table
					v-show="tabPosition == 'basis'"
					:max-height="570"
					v-loading="loading"
					:data="fieldList"
					@selection-change="handleSelectionChange"
					@row-click="handleRowClick"
					border
				>
					<el-table-column
						label="序号"
						align="center"
						type="index"
						width="85"
					></el-table-column>
					<el-table-column
						label="字段名称"
						align="center"
						key="fieldName"
						prop="fieldName"
						:show-overflow-tooltip="true"
					>
						<template slot-scope="scope">
								<div>
									<span
										v-show="
												!scope.row.isEdit && !scope.row.isAddRow
										"
										>{{ scope.row.fieldName }}</span
									>
									<el-input
										v-show="scope.row.isEdit || scope.row.isAddRow"
										v-model="scope.row.fieldName"
									></el-input>
								</div>
						</template>
					</el-table-column>
					<el-table-column
						label="字段中文名称"
						align="center"
						key="fieldAlias"
						prop="fieldAlias"
						:render-header="renderfieldAliasHeader"
						:show-overflow-tooltip="true"
					>
						<template slot-scope="scope">
								<div>
									<span
										v-show="
												!scope.row.isEdit && !scope.row.isAddRow
										"
										>{{ scope.row.fieldAlias }}</span
									>
									<el-input
										v-show="scope.row.isEdit || scope.row.isAddRow"
										v-model="scope.row.fieldAlias"
									></el-input>
								</div>
						</template>
					</el-table-column>
					<el-table-column
						label="字段类型"
						align="center"
						width="110"
						key="dataType"
						prop="dataType"
						:show-overflow-tooltip="true"
					>
						<template slot-scope="scope">
								<div>
									<span
										v-show="
												!scope.row.isEdit && !scope.row.isAddRow
										"
										>{{ scope.row.dataType }}</span
									>
									<el-select
										placeholder="请选择"
										v-show="scope.row.isEdit || scope.row.isAddRow"
										v-model="scope.row.dataType"
									>
										<el-option
												v-for="item in fieldType"
												:key="item"
												:label="item"
												:value="item"
										>
										</el-option>
									</el-select>
								</div>
						</template>
					</el-table-column>
					<el-table-column
						label="是否主键"
						align="center"
						key="primaryKey"
						prop="primaryKey"
						width="110"
					>
						<template slot-scope="scope">
								<div>
									<span
										v-show="
												!scope.row.isEdit && !scope.row.isAddRow
										"
										>{{ scope.row.primaryKey ? "是" : "否" }}</span
									>
									<el-select
										v-show="scope.row.isEdit || scope.row.isAddRow"
										v-model="scope.row.primaryKey"
									>
										<el-option label="是" :value="true">
										</el-option>
										<el-option label="否" :value="false">
										</el-option>
									</el-select>
								</div>
						</template>
					</el-table-column>
					<el-table-column
						label="是否非空"
						align="center"
						key="empty"
						prop="empty"
						width="110"
					>
						<template slot-scope="scope">
								<div>
									<span
										v-show="
												!scope.row.isEdit && !scope.row.isAddRow
										"
										>{{ scope.row.empty ? "是" : "否" }}</span
									>
									<el-select
										v-show="scope.row.isEdit || scope.row.isAddRow"
										v-model="scope.row.empty"
									>
										<el-option label="是" :value="true">
										</el-option>
										<el-option label="否" :value="false">
										</el-option>
									</el-select>
								</div>
						</template>
					</el-table-column>
					<el-table-column
						label="小数位数"
						align="center"
						key="scale"
						prop="scale"
						width="199"
					>
						<template slot-scope="scope">
								<div>
									<span
										v-show="
												!scope.row.isEdit && !scope.row.isAddRow
										"
										>{{ scope.row.scale }}</span
									>
									<el-input
										v-show="scope.row.isEdit || scope.row.isAddRow"
										v-model="scope.row.scale"
									></el-input>
								</div>
						</template>
					</el-table-column>
					<el-table-column
						label="字段长度"
						align="center"
						key="length"
						prop="length"
						width="199"
					>
						<template slot-scope="scope">
								<div>
									<span
										v-show="
												!scope.row.isEdit && !scope.row.isAddRow
										"
										>{{ scope.row.length }}</span
									>
									<el-input
										v-show="scope.row.isEdit || scope.row.isAddRow"
										v-model="scope.row.length"
									></el-input>
								</div>
						</template>
					</el-table-column>
					<el-table-column
						label="字段备注"
						align="center"
						key="comment"
						prop="comment"
						width="199"
						:render-header="rendercommentHeader"
					>
						<template slot-scope="scope">
								<div>
									<span
										v-show="
												!scope.row.isEdit && !scope.row.isAddRow
										"
										>{{ scope.row.comment }}</span
									>
									<el-input
										v-show="scope.row.isEdit || scope.row.isAddRow"
										v-model="scope.row.comment"
									></el-input>
								</div>
						</template>
					</el-table-column>
					<el-table-column
						label="操作"
						align="center"
						fixed="right"
						key="opeart"
						prop="deptName"
						width="159"
						v-if="accessType == '4' || accessType == '5'"
					>
						<template slot-scope="scope">
								<el-button
									size="mini"
									@click="
										handleEdit(scope.$index, scope.row, tabPosition)
									"
									v-if="!scope.row.isEdit && !scope.row.isAddRow"
								>
									编辑
								</el-button>
								<el-button
									size="mini"
									@click="
										handleSave(scope.$index, scope.row, tabPosition)
									"
									v-if="scope.row.isEdit || scope.row.isAddRow"
								>
									保存
								</el-button>
								<el-button
									size="mini"
									@click="
										handleExit(scope.$index, scope.row, tabPosition)
									"
									v-if="scope.row.isEdit || scope.row.isAddRow"
								>
									取消
								</el-button>
						</template>
					</el-table-column>
				</el-table>
				<pagination
					v-show="total > 0 && tabPosition == 'basis'"
					:total="total"
					:page.sync="queryParams.pageNum"
					:limit.sync="queryParams.pageSize"
					@pagination="getAssociatList"
				/>
		</template>
		<!--关联信息--->
		<template id="associat">
				<el-table
					v-show="tabPosition == 'associat'"
					max-height="460"
					v-loading="loading"
					:data="userList"
					@selection-change="handleSelectionChange"
					@row-click="handleRowClick"
					border
				>
					<el-table-column
						label="序号"
						align="center"
						type="index"
						width="85"
					></el-table-column>
					<el-table-column
						label="本表字段"
						align="center"
						key="fieldName"
						prop="fieldName"
						:show-overflow-tooltip="true"
					>
						<template slot-scope="scope">
								<div>
									<span
										v-show="
												(!scope.row.isAddRow || isAllEdit) &&
												!isAllEdit
										"
										>{{ scope.row.fieldName }}</span
									>
									<el-select
										v-model="scope.row.fieldName"
										@change="
												handleselectRefTableName(
													$event,
													scope.$index,
													'fieldName'
												)
										"
										placeholder="请选择"
										v-show="scope.row.isAddRow || isAllEdit"
									>
										<el-option
												v-for="item in fieldList"
												:key="item.fieldName"
												:label="item.fieldName"
												:value="item.id"
										>
										</el-option>
									</el-select>
								</div>
						</template>
					</el-table-column>
					<el-table-column
						label="关联库名称"
						align="center"
						key="refTableAlias"
						prop="refTableAlias"
						width="250"
						:show-overflow-tooltip="true"
					>
						<template slot-scope="scope">
								<div>
									<span
										v-show="
												(!scope.row.isAddRow || isAllEdit) &&
												!isAllEdit
										"
										>{{ scope.row.refTableAlias2 }}</span
									>
									<el-cascader
										v-model="scope.row.refdirPathId"
										:options="TreeList"
										:props="{
												value: 'id',
												label: 'dirName',
												children: 'children',
										}"
										@change="handleItemChange"
										v-show="scope.row.isAddRow || isAllEdit"
									></el-cascader>
								</div>
						</template>
					</el-table-column>
					<el-table-column
						label="关联表单名称"
						align="center"
						width="250"
						:show-overflow-tooltip="true"
					>
						<template slot-scope="scope">
								<div>
									<span v-show="!scope.row.isAddRow && !isAllEdit">{{
										scope.row.refTableAlias
									}}</span>
									<el-select
										v-model="scope.row.refTableAlias"
										filterable
										v-show="scope.row.isAddRow || isAllEdit"
										placeholder="请输入关键词"
										@change="
												handleselectRefTableName(
													$event,
													scope.$index,
													'refTableName'
												)
										"
									>
										<el-option
												v-for="items in baseDataList"
												:key="items.tableName"
												:label="items.tableAlias"
												:value="items.id"
										>
										</el-option>
									</el-select>
								</div>
						</template>
					</el-table-column>
					<el-table-column
						label="关联表单名称（英）"
						align="center"
						width="250"
						:show-overflow-tooltip="true"
					>
						<template slot-scope="scope">
								<span>{{ scope.row.refTableName }}</span>
						</template>
					</el-table-column>
					<el-table-column
						label="关联表字段"
						align="center"
						key="refFieldName"
						width="250"
						prop="refFieldName"
					>
						<template slot-scope="scope">
								<div>
									<span
										v-show="
												(!scope.row.isAddRow || isAllEdit) &&
												!isAllEdit
										"
										>{{ scope.row.refFieldName }}</span
									>
									<el-select
										v-model="scope.row.refFieldName"
										@change="
												handleselectRefTableName(
													$event,
													scope.$index,
													'RefTableNameList'
												)
										"
										placeholder="请选择"
										v-show="scope.row.isAddRow || isAllEdit"
									>
										<el-option
												v-for="item in RefTableNameList"
												:key="item.fieldName"
												:label="item.fieldName"
												:value="item.id"
										>
										</el-option>
									</el-select>
								</div>
						</template>
					</el-table-column>
					<el-table-column
						label="操作"
						align="center"
						fixed="right"
						width="159"
						v-if="accessType == '4' || accessType == '5'"
					>
						<template slot-scope="scope">
								<p
									class="danger-simple-btn simple-btn"
									@click="handleDelete(scope.row)"
									v-if="
										!scope.row.isEdit &&
										!isAllEdit &&
										!scope.row.isAddRow
									"
									plain
								>
									删除
								</p>
						</template>
					</el-table-column>
				</el-table>
		</template>
		<!--变更信息--->
		<template id="change">
				<el-table
					v-show="tabPosition == 'change'"
					:max-height="570"
					v-loading="loading"
					:data="ChangelogList"
					@selection-change="handleSelectionChange"
					@row-click="handleRowClick"
					border
				>
					<el-table-column
						label="序号"
						align="center"
						type="index"
						width="85"
					>
						<template slot-scope="scope">
								<span>{{ scope.$index + 1 }}</span>
						</template>
					</el-table-column>
					<el-table-column
						label="变更类型"
						align="center"
						key="logTypeName"
						prop="logTypeName"
						width="199"
						:show-overflow-tooltip="true"
					>
						<template slot-scope="scope">
								<div>
									<span>{{ scope.row.logTypeName }}</span>
								</div>
						</template>
					</el-table-column>
					<el-table-column
						label="变更数量"
						align="center"
						key="updateCount"
						prop="updateCount"
						width="199"
						:show-overflow-tooltip="true"
					>
						<template slot-scope="scope">
								<div>
									<span>{{ scope.row.updateCount }}</span>
								</div>
						</template>
					</el-table-column>
					<el-table-column
						label="变更描述"
						align="center"
						key="comment"
						prop="comment"
						:show-overflow-tooltip="true"
					>
						<template slot-scope="scope">
								<div>
									<span v-show="!scope.row.isEdit">{{
										scope.row.comment
									}}</span>
									<el-input
										v-show="scope.row.isEdit || scope.row.isAddRow"
										v-model="scope.row.comment"
									></el-input>
								</div>
						</template>
					</el-table-column>
					<el-table-column
						label="变更内容"
						align="center"
						key="content"
						prop="content"
						:show-overflow-tooltip="true"
					>
						<template slot-scope="scope">
								<div>
									<span v-show="!scope.row.isEdit">{{
										scope.row.content
									}}</span>
									<el-input
										v-show="scope.row.isEdit || scope.row.isAddRow"
										v-model="scope.row.content"
									></el-input>
								</div>
						</template>
					</el-table-column>
					<el-table-column
						label="变更时间"
						align="changTime"
						key="createTime"
						prop="createTime"
					>
						<template slot-scope="scope">
								<div>
									<span>{{
										parseTime(
												new Date(scope.row.createTime),
												"{y}-{m}-{d}"
										)
									}}</span>
								</div>
						</template>
					</el-table-column>
					<el-table-column
						label="变更人"
						align="center"
						key="operator"
						prop="operator"
						width="199"
					>
						<template slot-scope="scope">
								<div>
									<span>{{ scope.row.operator }}</span>
								</div>
						</template>
					</el-table-column>
					<el-table-column
						label="操作"
						align="center"
						fixed="right"
						width="159"
						v-if="accessType == '4' || accessType == '5'"
					>
						<template slot-scope="scope">
								<el-button
									size="mini"
									@click="
										handleEdit(scope.$index, scope.row, tabPosition)
									"
									v-if="!scope.row.isEdit && !scope.row.isAddRow"
								>
									编辑
								</el-button>
								<el-button
									size="mini"
									@click="
										handleSave(scope.$index, scope.row, tabPosition)
									"
									v-if="scope.row.isEdit || scope.row.isAddRow"
								>
									保存
								</el-button>
								<el-button
									size="mini"
									@click="
										handleExit(scope.$index, scope.row, tabPosition)
									"
									v-if="scope.row.isEdit || scope.row.isAddRow"
								>
									取消
								</el-button>
						</template>
					</el-table-column>
				</el-table>
				<pagination
					v-show="total2 > 0 && tabPosition == 'change'"
					:total="total2"
					:page.sync="queryParams.pageNum"
					:limit.sync="queryParams.pageSize"
					@pagination="getChangelogList"
				/>
		</template>
	</div>
</template>
<script>
import {
    getFieldsList,
    setFieldsList,
    getlogList,
    getRelationList,
    EditRelationList,
    getDatabeseAllList,
    deletemetadata,
} from "@/api/dataManagement/system/info";
import { mapTreeItem } from "@/api/dataManagement/system/dir";
import { fieldType } from "@/assets/js/fieldTypeList";
import { setLogComment } from "@/api/dataManagement/system/log";
import { getHeight } from "@/utils/zkComm";
export default {
    name: "metaData",
    props: {
        isEdit: {
            type: Boolean,
        },
        accessType: Number,
        tabId:Number,
    },
    data() {
        return {
            // 遮罩层
            loading: false,
            tabsMap: {
                basis: "fieldList",
                associat: "userList",
                change: "ChangelogList",
            },
            fieldType,
            mapHeight: undefined,
            total: 0,
            total2: 0,
            // 用户表格数据
            userList: [],
            loading: "",
            treeDirId: "",
            //基础信息
            fieldList: [],
            // 变更记录
            ChangelogList: [],
            // 分页查询
            queryParams: {
                pageNum: 1,
                pageSize: 30,
                tableId: "",
            },
            tabPosition: "basis",
            isAddRow: false,
            isRowEdit: false,
            isAllEdit: false,
            value: "",
            TreeList: [],
            tableId: "",
            baseDataList: [],
            RefTableNameList: [],
        };
    },
    created() {
        this.queryParams.tableId = this.tabId;
		  this.tableId = this.tabId;
        this.tabPosition = this.$route.query.associat
            ? this.$route.query.associat
            : "basis";
        if (this.$route.query.associat == "basis") {
            this.getFieldsbasicList();
        }
        if (this.$route.query.associat == "associat") {
            this.getAssociatList();
        }
        if (this.$route.query.associat == "ChangelogList") {
            this.getChangelogList();
        }
        this.getFieldsbasicList();
        this.getTreeList();
    },
    mounted() {
        this.mapHeight = getHeight(false) - 20;
    },
    methods: {
        //获取元数据信息-基础信息
        getFieldsbasicList() {
            getFieldsList({
                params: { tableId: this.tableId },
                methods: "get",
            }).then((res) => {
                res.data.forEach((ele) => {
                    ele.isEdit = false;
                });
                this.fieldList = res.data;
            });
        },
        addIsEditfiled(data) {
            if (!Array.isArray(data)) {
                return data;
            }
        },
        renderfieldAliasHeader(h, { column, $index }) {
            return h("div", {
                attrs: {
                    class: "cell",
                },
                domProps: {
                    innerHTML: column.label + '<p class="red">[仅限于平台]</p>',
                },
            });
        },
        rendercommentHeader(h, { column, $index }) {
            return h("div", {
                attrs: {
                    class: "cell",
                },
                domProps: {
                    innerHTML:
                        column.label + '<p class="red">[同步数据库comment]</p>',
                },
            });
        },
        // 关联信息
        getAssociatList() {
			  console.log(this.tableId,'sssssss')
            getRelationList({ tableId: this.tableId }).then((res) => {
                if (res.code == 200) {
                    var data = res.data;
                    data.forEach((res) => {
                        res.isEdit = false;
                        res.isAddRow = false;
                        res.refTableAlias2 = res.refDirPath;
                        res.refdirPathId = [];
                        var dirPathArr = res.refDirPath.split(">");
                        for (var i = 0; i < dirPathArr.length; i++) {
                            resetPath(this.TreeList, 0, dirPathArr[i]);
                        }
                        function resetPath(data, leave, keyword) {
                            var leave = leave || 0;
                            leave++;
                            for (let i = 0; i < data.length; i++) {
                                if (data[i].dirName == keyword) {
                                    res.refdirPathId.push(data[i].id);
                                } else {
                                    if (data[i].children) {
                                        resetPath(
                                            data[i].children,
                                            leave,
                                            keyword
                                        );
                                    }
                                }
                            }
                        }
                    });
                    this.userList = res.data;
                }
            });
        },
        // 变更记录
        getChangelogList() {
            getlogList({ tableId: this.tableId, changeType: "metadata" }).then(
                (res) => {
                    if (res.code == 200 && res.rows.length > 0) {
                        res.rows.forEach((ele) => {
                            ele.isEdit = false;
                        });
                        this.ChangelogList = res.rows;
                        this.total2 = res.total;
                    }
                }
            );
        },
        handleRowClick(index) {
            console.log(index);
        },
        handleSelectionChange(index) {
            console.log(index);
        },
        handleChange() {},
        // 获取树结构
        getTreeList() {
            mapTreeItem().then((res) => {
                var temp = [];
                var map = {};
                var data = res.data.children;
                resetData(data);
                function resetData(data, leave) {
                    var leave = leave || 0;
                    leave++;
                    for (let i = 0; i < data.length; i++) {
                        if (data[i].children.length == 0) {
                            delete data[i].children;
                        } else {
                            resetData(data[i].children, leave);
                        }
                    }
                }
                this.TreeList = data;
            });
        },
        // 内页tabs 且换
        handleClick(label) {
            if (this.isAddRow || this.isRowEdit) {
                this.$message({
                    message: "新增和编辑中不能进行切换",
                    type: "warning",
                });
                // this.antdMessage.warning("新增和编辑中不能进行切换");
                return false;
            }
            this.tabPosition = label;
            if (label == "basis") {
                // 基础信息
                this.getFieldsbasicList();
                this.mapHeight = getHeight(false) - 20;
            } else if (label == "associat") {
                // 关联信息
                this.getAssociatList();
                this.mapHeight = getHeight(false) - 20;
            } else {
                // 变更信息
                this.getChangelogList();
                this.mapHeight = getHeight(true) - 20;
            }
        },
        // 新增按钮
        isEdidAddHandle(tab) {
            if (this.isRowEdit) {
                this.$message({
                    message: "先保存再进行新增数据",
                    type: "warning",
                });
                return false;
            }
            var dataList = this[this.tabsMap[tab]]
                ? this[this.tabsMap[tab]][0]
                : "";
            var addRow = {};
            if (tab == "associat") {
                dataList = {
                    fieldName: "",
                    refTableName: "",
                    refFieldName: "",
                    refTableAlias2: "",
                    refTableAlias: "",
                };
            }
            if (dataList) {
                for (var item in dataList) {
                    addRow[item] = null;
                }
                addRow.isAddRow = true;
                this.isAddRow = true;
                this.isRowEdit = true;
                this[this.tabsMap[tab]].push(addRow);
            }
        },
        // 控制数据中是否编辑
        getpreviewList(index, dataArr) {
            var previewList = this[dataArr];
            previewList[index].isEdit = !previewList[index].isEdit;
            if (previewList[index].isAddRow)
                previewList[index].isAddRow = false;
        },
        // 编辑
        handleEdit(index, row, tabs) {
            if (this.isRowEdit) {
                this.$message({
                    message: "请先保存正在编辑的数据后再进行编辑",
                    type: "warning",
                });
				// this.antdMessage.warning("请先保存正在编辑的数据后再进行编辑");
                return false;
            }
            if (index !== null) {
                this.getpreviewList(index, this.tabsMap[tabs]);
            }
            this.isRowEdit = true;
            this.isAllEdit = true;
        },
        // 保存
        handleSave(index, row, tabs) {
            this.getpreviewList(index, this.tabsMap[tabs]);
            this.isRowEdit = false;
            this.isAllEdit = false;
            this.isAddRow = false;
            var params = {
                method: "put",
                text: "编辑",
            };
            if (tabs == "basis") {
                if (row.isAddRow == false) {
                    params.method = "post";
                    params.text = "新增";
                } else {
                    params.method = "put";
                    params.text = "编辑";
                }
                setFieldsList({
                    tableId: this.tableId,
                    data: row,
                    method: params.method,
                })
                    .then((res) => {
                        if (res.code == 200) {
                            this.$message({
                                message: params.text + "成功",
                                type: "success",
                            });
							// this.antdMessage.success(params.text + "成功");
                            this.getFieldsbasicList();
                        }
                    })
                    .catch((err) => {
                        this.getFieldsbasicList();
                    });
            } else if (tabs == "change") {
                setLogComment({ id: row.id, query: { comment: row.comment } })
                    .then((res) => {
                        if (res.code == 200) {
                            this.$message({
                                message: params.text + "成功",
                                type: "success",
                            });
							// this.antdMessage.success(params.text + "成功");
                            this.getChangelogList();
                        }
                    })
                    .catch((res) => {
                        this.getChangelogList();
                    });
            }
        },
        // 取消按钮
        handleExit(index, row, tabs) {
            if (row ? row.isAddRow : true) {
                var data = this[this.tabsMap[tabs]];
                if (index) {
                    data.splice(index, 1);
                } else if (this.isAddRow) {
                    data.splice(this[this.tabsMap[tabs]].length - 1, 1);
                }
                this[this.tabsMap[tabs]] = data;
                this.isRowEdit = false;
                this.isAllEdit = false;
                this.isAddRow = false;
            } else {
                this.getpreviewList(index, this.tabsMap[tabs]);
                this.isRowEdit = false;
                this.isAllEdit = false;
            }
            if (tabs == "basis") {
                this.getFieldsbasicList();
            }
            if (tabs == "change") {
                this.getChangelogList();
            }
        },
        // 关联信息 编辑按钮
        associatEdit() {
            this.isAllEdit = true;
            this.isRowEdit = true;
        },
        // 关联按钮
        handleAssociat() {
            this.$router.push(
                "/DMS/dataMap/mapDirectory/associatMap?tableId=" +
                    this.tableId +
                    "&dirId=" +
                    this.$route.query.dirId
            );
        },
        // 保存按钮
        associatSave() {
            var messageText = "编辑";
            if (!this.isAllEdit) {
                messageText = "新增";
            } else {
                messageText = "编辑";
            }
            this.isRowEdit = false;
            this.isAllEdit = false;
            this.isAddRow = false;
            if (!this.userList[this.userList.length - 1].refDirId) {
                this.userList[this.userList.length - 1].refDirId =
                    this.treeDirId;
            }
            EditRelationList({
                method: "put",
                tableId: this.tableId,
                list: this.userList,
            })
                .then((res) => {
                    if (res.code == 200) {
                        this.$message({
                            message: messageText + "成功",
                            type: "success",
                        });
						// this.antdMessage.success(messageText + "成功");
                    }
                    this.getAssociatList();
                })
                .catch((res) => {
                    this.getAssociatList();
                });
        },
        handleItemChange(val) {
            let that = this;
            getChild(that.TreeList, val[val.length - 1]);
            function getChild(data, dirId) {
                for (var i = 0; i < data.length; i++) {
                    if (data[i].id == dirId) {
                        that.treeDirId = data[i].id;
                        getDatabeseAllList({ dirId: that.treeDirId }).then(
                            (res) => {
                                that.baseDataList = res.data;
                            }
                        );
                    } else if (
                        data[i].children &&
                        data[i].children.length > 0
                    ) {
                        getChild(data[i].children, dirId);
                    }
                }
                that.TreeList = data;
            }
        },
        handleselectRefTableName(val, index, type) {
            if (type == "refTableName") {
                this.setUserList(
                    this.userList,
                    index,
                    val,
                    "refTableName",
                    this.baseDataList,
                    "tableName"
                );
                this.setUserList(
                    this.userList,
                    index,
                    val,
                    "refTableAlias",
                    this.baseDataList,
                    "tableAlias"
                );
                this.setUserList(
                    this.userList,
                    index,
                    val,
                    "refTableId",
                    this.baseDataList,
                    "id"
                );
                getFieldsList({
                    params: { tableId: val },
                    methods: "get",
                }).then((res) => {
                    this.RefTableNameList = res.data;
                });
            } else if (type == "RefTableNameList") {
                this.setUserList(
                    this.userList,
                    index,
                    val,
                    "refFieldId",
                    this.RefTableNameList,
                    "id"
                );
                this.setUserList(
                    this.userList,
                    index,
                    val,
                    "refFieldName",
                    this.RefTableNameList,
                    "fieldName"
                );
            } else if (type == "fieldName") {
                this.setUserList(
                    this.userList,
                    index,
                    val,
                    "fieldId",
                    this.fieldList,
                    "id"
                );
                this.setUserList(
                    this.userList,
                    index,
                    val,
                    "fieldName",
                    this.fieldList,
                    "fieldName"
                );
            }
        },
        setUserList(data, index, val, name, refData, refName) {
            for (var i = 0; i < refData.length; i++) {
                if (refData[i].id == val) {
                    data[index][name] = refData[i][refName];
                }
            }
        },
        updataHandle() {
            this.tabPosition = "basis";
            this.isAddRow = false;
            this.isRowEdit = false;
            this.isAllEdit = false;
            this.getFieldsbasicList();
        },
        // 元数据关联信息删除
        handleDelete(item) {
            // /datacenter/system/table/{relationId}/metadata/relation/delete?dirId=
            console.log(item, "1132123");
            deletemetadata({
                relationId: item.relationId,
                dirId: item.dirId,
            }).then((res) => {
                this.$message({
                    message: "删除成功",
                    type: "success",
                });
				// this.antdMessage.success(删除成功);
                this.getAssociatList();
            });
        },
        remoteMethod(query) {
            //    var that = this;
            //   if (query !== '' && that.treeDirId) {
            //       getDatabeseList({dirId:that.treeDirId,pageNum: 1,pageSize: 100,tableName:query}).then(res=>{
            //             for(var i=0;i<res.rows.length;i++){
            //                console.log()
            //                res.rows[i].label =  res.rows[i].tableName
            //                res.rows[i].value =  res.rows[i].tableName
            //             }
            //             that.baseDataList = res.rows
            //             that.$set(that.baseDataList,res.rows)
            //             console.log(that.baseDataList)
            //       })
            //   }
        },
    },
};
</script>

<style>
.red {
    color: rgb(184, 180, 180);
    margin: 0;
}
</style>
<style lang="scss" scoped>
/****
 reset element style
.

 */

/****
 reset element style
.

 */
.svg-iconfont {
    vertical-align: -0.1em;
}
.btn-notAction {
    border-radius: 0px !important;
}
.btn-action {
    background: #1183f8;
    color: #ffffff;
}
</style>
